<template>
  <div>
    <el-button type="primary" @click="willAdd">添加</el-button>

    <!-- 列表 -->
    <v-list @willUpdate="willUpdate" :list="list" @init="init"></v-list>
    <!-- 弹框 -->
    <v-form :status="status" @init="init" :list="list" ref="form"></v-form>
  </div>
</template>
<script>
import {reqrolelist} from "../../http/api";
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
export default {
  components: {
    vList,
    vForm,
  },
  props: [],
  data() {
    return {
      //2.1初始值
      status: {
        isshow: false, //控制弹框是否出现
        isAdd: true, //是添加的弹框还是编辑的弹框
      },
      //3.1初始值
      list: [],
    };
  },
  methods: {
      //取列表数据
      init(){
          reqrolelist().then(res=>{
              if(res.data.code==200){
                  this.list=res.data.list?res.data.list:[]
              }
          })
      },
    //2.2点击了添加
    willAdd() {
      this.status = {
        isshow: true,
        isAdd: true,
      };
    },
    //2.4点了编辑
    willUpdate(id) {
      this.status = {
        isshow: true,
        isAdd: false,
      };
      //7.2让form的getOne(id)
      this.$refs.form.getOne(id);
    },
  },
  mounted() {
      //进来就请数据
    this.init();
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
</style>